<template>
	<div class="Student">
		<el-input v-model="keyword" placeholder="请输入学号" class="input-with-select" style="width:40%">
			<template #append>
				<el-button @click="search">
					<el-icon>
						<Search />
					</el-icon>
				</el-button>
			</template>
		</el-input>
		<el-button primary @click="addInit">登记</el-button>
		<el-button primary @click="checkReport">查看申请</el-button>
		<p></p>
		<el-table :data="tableData" style="width: 100%" :stripe="true" ref="multipleTable"
			@selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
			<el-table-column prop="no" label="学号" sortable align="center" />
			<el-table-column prop="name" label="姓名" sortable width="90" align="center" />
			<el-table-column prop="academy" label="学院" sortable width="90" align="center" />
			<el-table-column prop="age" label="年龄" sortable width="90" align="center" />
			<el-table-column prop="grade" label="班级" sortable width="90" align="center" />
			<el-table-column prop="post" label="职位" sortable width="90" align="center" />
			<el-table-column prop="counselor.counselor_name" label="辅导员" sortable width="90" align="center" />
			<el-table-column prop="checkin_time" label="入住时间" sortable align="center" />
			<el-table-column prop="checkin_status" label="入住状态" align="center" />
			<el-table-column prop="dormitoryManagement.dorm_no" label="宿舍号" sortable width="90" align="center" />
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button type="primary" @click="editInit(scope.row)" style="border-radius: 40px;">
						<el-icon>
							<Edit />
						</el-icon> 修改
					</el-button>
					<el-button type="danger" @click="insureDelete(scope.row)" style="border-radius: 40px;">
						<el-icon>
							<Delete />
						</el-icon> 删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination small background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount"
			:current-page="currentPage" @current-change="haddlePageChange" />


		<!-- 增加对话框 -->
		<el-dialog v-model="dialogVisible" title="登记" width="35%" draggable>
			<!-- <span>增加</span> -->
			<el-form :model="form" label-width="80px" :rules="formRules" class="demo-ruleForm">
				<el-form-item label="宿舍号">
					<el-select v-model="form.dormitoryManagement.dorm_no" value-key="dorm_no" placeholder="请选择"
						style="width:100%;">
						<el-option v-for="item in dormOption" :key="item.id" :label="item.dorm_no"
							:value="item.dorm_no">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="学号" prop="no">
					<el-input v-model="form.no" />
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="学院" prop="academy">
					<el-input v-model="form.academy" />
				</el-form-item>
				<el-form-item label="班级" prop="grade">
					<el-input v-model="form.grade" />
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="form.age" />
				</el-form-item>
				<el-form-item label="职位" prop="post">
					<el-input v-model="form.post" />
				</el-form-item>
				<el-form-item label="辅导员" prop="counselor.counselor_name">
					<el-input v-model="form.counselor.counselor_name" />
				</el-form-item>
				<el-form-item label="入住时间" prop="checkin_time">
					<el-input v-model="form.checkin_time" />
				</el-form-item>
				<el-form-item label="入住状态" prop="checkin_status">
					<el-input v-model="form.checkin_status" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addSubmit()">提交</el-button>
				</span>
			</template>
		</el-dialog>
		<!--  修改对话框 -->
		<el-dialog v-model="editVisible" title="修改" width="35%" draggable>
			<el-form :model="form" label-width="80px" :rules="formRules" class="demo-ruleForm">
				<el-form-item label="宿舍号">
					<el-select v-model="form.dormitoryManagement.dorm_no" value-key="dorm_no" placeholder="请选择"
						style="width:100%;">
						<el-option v-for="item in dormOption" :key="item.id" :label="item.dorm_no"
							:value="item.dorm_no">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="学号" prop="no">
					<el-input v-model="form.no" />
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="学院" prop="academy">
					<el-input v-model="form.academy" />
				</el-form-item>
				<el-form-item label="班级" prop="grade">
					<el-input v-model="form.grade" />
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="form.age" />
				</el-form-item>
				<el-form-item label="职位" prop="post">
					<el-input v-model="form.post" />
				</el-form-item>
				<el-form-item label="辅导员" prop="counselor.counselor_name">
					<el-input v-model="form.counselor.counselor_name" />
				</el-form-item>
				<el-form-item label="入住时间" prop="checkin_time">
					<el-input v-model="form.checkin_time" />
				</el-form-item>
				<el-form-item label="入住状态" prop="checkin_status">
					<el-input v-model="form.checkin_status" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => {editVisible = false}">取消</el-button>
					<el-button type="primary" @click="editSubmit()">提交</el-button>
				</span>
			</template>
		</el-dialog>

		<!--  删除二次确认dialog -->
		<el-dialog v-model="deleteVisible" title="确认删除" width="20%" draggable>
			<p>您确定要删除此数据吗</p>
			<span class="dialog-footer" style="text-align: center;">
				<el-button @click="deleteVisible = false" style="margin-top:15px;">取消</el-button>
				<el-button type="primary" @click="handleDelete(deleteId)" style="margin-top:15px;">确认</el-button>
			</span>
		</el-dialog>

		<!--  待审核对话框 -->
		<el-dialog v-model="checkreport" title="待审核申请" width="70%" draggable>
			<el-table :data="checkReportData" style="width: 100%" :stripe="true" ref="multipleTable"
				@selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
				<el-table-column prop="dormitoryManagement.dorm_no" label="宿舍号" sortable width="90" align="center" />
				<el-table-column prop="student.no" label="学号" sortable width="90" align="center" />
				<el-table-column prop="student.name" label="姓名" sortable width="90" align="center" />
				<el-table-column prop="dormitoryManagement.building" label="宿舍楼" sortable width="90" align="center" />
				<el-table-column prop="student.grade" label="班级" width="90" align="center" />
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button type="primary" @click="mangerAgreeReport(scope.row)">同意</el-button>
						<el-button type="primary" @click="mangerDisAgreeReport(scope.row)">不同意</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination small layout="prev, pager, next" :page-size="pageSize1" :page-count="pageCount1"
				:current-page="currentPages" @current-change="haddlePageChange1" />
		</el-dialog>

	</div>
</template>

<script setup>
	import {
		ref,
		toRefs,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'

	let {
		proxy
	} = getCurrentInstance();
	var tableData = ref([]);
	var pageCount = ref(0)
	var pageSize = ref(9)
	var currentPage = ref(1)

	function getTableData() {
		var param = {
			"pagination": {
				"pageNo": currentPage.value,
				"pageSize": pageSize.value
			},
			"conditionList": []
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.post("StudentFindAll", jsonparam)
			.then(res => {
				tableData.value = res.data.records;
				pageCount.value = Math.ceil(res.data.totalNum / pageSize.value);
			})
			.catch(err => {
				console.log(err)
			});
	}

	onMounted(() => {
		getTableData()

	});
	function haddlePageChange(currentpage) {
		currentPage.value = currentpage;
		getTableData();
	}
	let dormOption = ref([]); 
	let form = ref({}); 
	const dialogVisible = ref(false) 
	function addInit() {
		form.value = {
			"academy": "",
			"age": null,
			"checkin_status": "",
			"checkin_time": "",
			"counselor": {
				"counselor_name": ""
			},
			"dormitoryManagement": {
				"dorm_no": null,
			},
			"grade": "",
			"name": "",
			"no": "",
			"post": ""
		}
		dialogVisible.value = true
		var pageSize = ref(100000)
		var currentPage = ref(1)
		var param = {
			"pagination": {
				"pageNo": currentPage.value,
				"pageSize": pageSize.value
			},
			"conditionList": []
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.post("/DormitoryManagementFindAll", jsonparam)
			.then(res => {
				dormOption.value = res.data.records;
			})
	}

	function addSubmit() {
		proxy.$http.post("StudentAdd", form.value)
			.then(res => {
				dialogVisible.value = false	
				getTableData(); 
			})
	}
	var checkReportData = ref([]);
	const checkreport = ref(false)
	var pageCount1 = ref(0)
	var pageSize1 = ref(6)
	var currentPages = ref(1)

	function checkReport() {
		checkreport.value = true
		var param = {
			"pagination": {
				"pageNo": currentPages.value,
				"pageSize": pageSize1.value
			},
			"conditionList": []
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.post("ManagementFindAllCtl", jsonparam)
			.then(res => {
				checkReportData.value = res.data.records;
				pageCount1.value = Math.ceil(res.data.totalNum / pageSize1.value);
			})
			.catch(err => {
				console.log(err)
			});
	}
	function haddlePageChange1(currentpages) {
		currentPages.value = currentpages;
		checkReport();
	}

	let editVisible = ref(false)
	const editInit = (row) => {
		editVisible.value = true
		form.value = row
		console.log(JSON.stringify(row))
		var pageSize = ref(100000)
		var currentPage = ref(1)
		var param = {
			"pagination": {
				"pageNo": currentPage.value,
				"pageSize": pageSize.value
			},
			"conditionList": []
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.post("/DormitoryManagementFindAll", jsonparam)
			.then(res => {
				dormOption.value = res.data.records;
			})
	}
	const editSubmit = () => {
		proxy.$http.post("/StudentUpdate", form.value)
			.then(res => {
				console.log(res)
				editVisible.value = false		
				getTableData(); 	
			})
	}
	let deleteVisible = ref(false)
	var deleteId = ref()
	const insureDelete = (val) => {
		deleteVisible.value = true
		deleteId.value = val.no
	}
	const handleDelete = (id) => {
		proxy.$http.get('/StudentDelete' + '?no=' + id)
			.then(res => {
				console.log(id)
				deleteVisible.value = false
				getTableData();
			})
	}
	const mangerAgreeReport = (row) => {
		form.value = row
		proxy.$http.post("/ManageControllerAgreeCtl", form.value)
			.then(res => {
				checkReport();
				alert(res.data.message)
			})
	}
	const mangerDisAgreeReport = (row) => {
		form.value = row
		proxy.$http.post("/ManageControllerDisAgreeCtl", form.value)
			.then(res => {
				checkReport();
				alert(res.data.message)
			})
	}

	//按关键字查询
	const keyword = ref('')
	let search = () => {
		if (keyword.value == ''){
			getTableData()
			return false
		}
		var param = {
			"no": keyword.value,
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.get("/StudentFind" + '?no=' + keyword.value)
			.then(res => {
				tableData.value = [res.data]
			})
			.catch(err => {
				console.log(err)
			});
	}


	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		if (value.length < 12 || value.length > 12)
			callback(new Error('学号数字个数应为12'))
		else if (!no.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}

	};
	const formRules = reactive({
		no: [{
				required: true,
				message: '请输入学号',
				trigger: 'blur'
			},
			{
				validator: isNum,
				trigger: 'blur'
			}
		],
		name: [{
				required: true,
				message: '请输入姓名',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 5,
				message: '长度在 2 到 5 个字符',
				trigger: 'blur'
			}
		],
		grade: [{
				required: true,
				message: '请输入班级',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 10,
				message: '长度在 2 到 10 个字符',
				trigger: 'blur'
			}
		],
	});
</script>
//分页居中显示
<style scoped>
	.el-pagination {
		justify-content: center;
	}
</style>
